<template>
  <div id="videolist" class="page-full-screen">
    <div>
      <!--<el-button @click="addTit('新增')">新增</el-button>-->
      <el-button @click="addTit('屏蔽')">屏蔽</el-button>
      <el-button @click="addTit('解除屏蔽')">解除屏蔽</el-button>
      <!--<el-button @click="addTit('设置大咖')">设置大咖</el-button>-->
      <!--<el-button @click="addTit('设置用户组')">设置用户组</el-button>-->
      <el-button @click="searchshow = !searchshow">搜索&nbsp;<i class="iconfont icon-zhankai" :class="{active: searchshow === true}" style="font-size: 12px"></i>
      </el-button>
    </div>
    <el-collapse-transition>
      <div v-show="searchshow">
        <div class="main-box">
          <span>可使用用户组:</span>
          <el-select v-model="searchmsg.aro_id" size="mini" placeholder="请选择">
            <el-option
              v-for="item in videocateadd"
              :key="item.id"
              :label="item.alias"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="main-box">
          <span>状态:</span>
          <el-radio-group v-model="searchmsg.enabled">
            <el-radio label="">全部</el-radio>
            <el-radio label="1">可用</el-radio>
            <el-radio label="0">不可用</el-radio>
          </el-radio-group>
        </div>
        <div class="main-box">
          <span>用户ID</span>
          <el-input
            placeholder="请输入用户ID"
            size="mini"
            prefix-icon="el-icon-search"
            v-model="searchmsg.id">
          </el-input>
        </div>
        <div class="main-box">
          <span>用户昵称</span>
          <el-input
            placeholder="请输入用户昵称"
            size="mini"
            prefix-icon="el-icon-search"
            v-model="searchmsg.nickname">
          </el-input>
        </div>
        <div class="main-box">
          <span>手机号</span>
          <el-input
            placeholder="请输入手机号"
            size="mini"
            prefix-icon="el-icon-search"
            v-model="searchmsg.mobile">
          </el-input>
          <span style="margin-left: 20px"><el-button size="mini" @click="search">确定</el-button></span>
        </div>
      </div>
    </el-collapse-transition>
    <msg-list :tableData="tableData"
              :title="title"
              :btntype="btntype"
              :pagesall="parseInt(pagesall)"
              :pages="parseInt(page)"
              @getselect="getselect"
              @changepage="changepage1"
              @getid="getid1"></msg-list>
    <div class="layer" v-show="seecontent">
      <div class="mask" @click="seecontent = false"></div>
      <div class="content">
        <span class="close" @click="seecontent = false"><i class="iconfont icon-untitled94"></i></span>
        <div v-if="addtitle === '设置VIP'">
          <p class="title">{{ addtitle }}</p>
          <div class="inputcl">
            <span class="layer-list-title">开始时间:</span>
            <span class="imgupload">
              <el-date-picker
                v-model="addvideo.begin_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间"
                size="mini">
              </el-date-picker>
            </span>
          </div>
          <div class="clear"></div>
          <div class="inputcl">
            <span class="layer-list-title">结束时间:</span>
            <span class="imgupload">
              <el-date-picker
                v-model="addvideo.end_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间"
                size="mini">
              </el-date-picker>
            </span>
          </div>
          <div class="clear"></div>
          <div class="inputcl">
            <span class="layer-list-title">身份证:</span>
            <span><el-input v-model="addvideo.id_card" placeholder="请输入身份证" size="mini"></el-input></span>
          </div>
          <div class="clear"></div>
        </div>
        <div v-if="addtitle === '设置用户组'">
          <p class="title">{{ addtitle }}</p>
          <div class="inputcl">
            <span class="layer-list-title">用户组:</span>
            <el-select v-model="addvideo.aro_id" size="mini" placeholder="请选择">
              <el-option
                v-for="item in videocateadd"
                :key="item.id"
                :label="item.alias"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="clear"></div>
          <div class="inputcl">
            <span class="layer-list-title">开始时间:</span>
            <span class="imgupload">
              <el-date-picker
                v-model="addvideo.begin_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间"
                size="mini">
              </el-date-picker>
            </span>
          </div>
          <div class="clear"></div>
          <div class="inputcl">
            <span class="layer-list-title">结束时间:</span>
            <span class="imgupload">
              <el-date-picker
                v-model="addvideo.end_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间"
                size="mini">
              </el-date-picker>
            </span>
          </div>
          <div class="clear"></div>
        </div>
        <div v-if="addtitle === '设置大咖'">
          <p class="title">{{ addtitle }}</p>
          <div class="inputcl">
            <span class="layer-list-title">价格:</span>
            <span><el-input v-model="price" placeholder="请输入价格" size="mini"></el-input></span>
          </div>
          <div class="clear"></div>
          <div class="inputcl">
            <span class="layer-list-title">可用优惠:</span>
            <el-select v-model="kaDiscount" size="mini" placeholder="请选择">
              <el-option
                v-for="item in allCode"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="clear"></div>
        </div>
        <div class="main-box" style="text-align: center">
          <span style="margin-left: 50px;"><el-button @click="addTags">确定</el-button></span>
          <span style="margin-left: 50px;"><el-button @click="seecontent = false">取消</el-button></span>
        </div>
      </div>
    </div>
    <el-dialog
      title="设置优惠券"
      :visible.sync="centerDialogVisible"
      width="50%">
      <ul class="code-ul">
        <li v-for="(item, index) in allCode" :key="index">
          <div>
            {{ item.title }}
          </div>
          <div>
            <el-input v-model="inputCode[item.id]" placeholder="请输入数量"></el-input>
          </div>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="postCode">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="用户信息"
      :visible.sync="centerDialogVisible1"
      width="50%"
      center>
      <div class="userinfo-class">
        <div>用户ID：{{ userInfo.users.id }}</div>
        <div>用户名：{{ userInfo.users.username }}</div>
        <div>用户手机：{{ userInfo.users.username }}</div>
        <div>用户登录时间：{{ userInfo.users.login_time }}</div>
        <div>用户登录IP：{{ userInfo.users.login_ip }}</div>
        <div>用户登录次数：{{ userInfo.users.login_num }}</div>
        <div>用户是否可用：{{ userInfo.users.enabled }}</div>
      </div>
      <div class="userinfo-class">
        <div>用户组ID：{{ userInfo.user_groups.user_aro_id }}</div>
        <div>用户组名：{{ userInfo.user_groups.aro_name }}</div>
        <div v-if="userInfo.user_groups.end_time !== '1970-01-01 08:00:00'">会员有效期：{{ userInfo.user_groups.begin_time }} ~ {{ userInfo.user_groups.end_time }}
        </div>
      </div>
      <div class="userinfo-class">
        <div>用户昵称：{{ userInfo.user_infos.nickname }}</div>
        <div><span class="img-title">用户头像：</span><img :src="userInfo.user_infos.avatar" /></div>
        <div>用户性别：{{ userInfo.user_infos.gender === 1 ? '男' : '女' }}</div>
        <div>用户生日：{{ userInfo.user_infos.birthday }}</div>
        <div>用户签名：{{ userInfo.user_infos.sign }}</div>
        <div>用户身份证：{{ userInfo.user_infos.id_card ? userInfo.user_infos.id_card : '空' }}</div>
      </div>
      <div class="userinfo-class">
        <ul>
          <li v-for="(item, index) in userInfo.user_points" :key="index">
            <div>
              优惠券：{{ item.point_name }}
            </div>
            <div>
              数量：{{ item.point }}张
            </div>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="centerDialogVisible1 = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import msgbox from '../../common/msgbox.js'
import config from '../../common/config'
import MsgList from '../public/msgList'
import editor from '../../assets/editor/editor'
import ImgUpload from '../public/imgUpload'

export default {
  components: {
    ImgUpload,
    MsgList,
    editor: editor
  },
  name: 'index',
  data() {
    return {
      allCode: [],
      inputCode: [],
      centerDialogVisible1: false,
      centerDialogVisible: false,
      page: 1,
      addtitle: '新增',
      enabled: 1,
      addvideo: {
        title: '',
        intro: '',
        website: '',
        icon: '',
        deal_code: '',
        download_url: '',
        order_num: 0,
        enabled: 1,
        content: '',
        aro_id: ''
      },
      searchmsg: {
        mobile: '',
        id: '',
        aro_id: 0,
        nickname: '',
        enabled: ''
      },
      btntype: [],
      pagesall: 0,
      content: {},
      type: true,
      deletes: {
        ids: [],
        reason: ''
      },
      delshow: false,
      searchshow: false,
      seecontent: false,
      title: [
        {
          prop: 'id',
          label: 'id'
        },
        {
          prop: 'username',
          label: '姓名'
        },
        {
          prop: 'company_title',
          label: '企业名'
        },
        {
          prop: 'mobile',
          label: '手机号'
        },
        {
          prop: 'enabled',
          label: '是否可用'
        }
      ],
      tableData: [],
      price: 0,
      intro: [],
      tid: 0,
      getmsg: {},
      videocateadd: [],
      userInfo: {
        users: {},
        user_groups: {},
        user_infos: {},
        user_points: {}
      },
      kaDiscount: ''
    }
  },
  mounted() {
    this.search()
  },
  watch: {
    // 'searchmsg.category_id' : {
    //   handler () {
    //     this.page = 1
    //   }
    // }
  },
  methods: {
    search() { // 搜索获取数据
      let that = this
      this.$g.ajax({
        path: 'users/getList',
        method: 'post',
        data: {
          mobile: this.searchmsg.mobile,
          id: this.searchmsg.id,
          aro_id: this.searchmsg.aro_id,
          enabled: this.searchmsg.enabled,
          nickname: this.searchmsg.nickname,
          page: this.page
        },
        cbSuccess: function(data) {
          that.tableData = data.memo.list
          that.pagesall = parseInt(data.memo.pageTotal)
          that.types()
        },
        cbError: function(data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    types() { // 获取分类数据
      let that = this
      this.$g.ajax({
        path: 'users/getAro',
        method: 'get',
        cbSuccess: function(data) {
          that.videocateadd = data.memo
          that.videocateadd.splice(0, 0, { id: 0, alias: '全部' })
        },
        cbError: function(data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    addTit(type) {
      let that = this
      if (type === '设置VIP') {
        this.seecontent = true
        this.addtitle = type
        this.addvideo = {
          begin_time: '',
          end_time: '',
          id_card: ''
        }
        this.enabled = 1
      } else if (type === '屏蔽' || type === '解除屏蔽') {
        let enabled = ''
        if (type === '屏蔽') {
          enabled = 0
        }
        if (type === '解除屏蔽') {
          enabled = 1
        }
        this.$g.ajax({
          path: 'users/setEnabled',
          method: 'post',
          data: {
            ids: this.deletes.ids,
            enabled: enabled
          },
          cbSuccess: function(data) {
            that.search()
          },
          cbError: function(data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      } else if (type === '设置大咖') {
        if (this.deletes.ids.length === 0) {
          let that = this
          that.$message.error('请选择需要操作的数据')
          return true
        }
        this.seecontent = true
        this.addtitle = type
        this.setCode1()
      } else if (type === '设置用户组') {
        if (this.deletes.ids.length === 0) {
          let that = this
          that.$message.error('请选择需要操作的数据')
          return true
        }
        this.seecontent = true
        this.addtitle = type
      }
    },
    addTags() { // 添加/修改视频集
      let that = this
      if (this.addvideo.begin_time === '') {
        this.$message.error('开始时间不能为空')
      } else if (this.addvideo.end_time === '') {
        this.$message.error('结束时间不能为空')
      } else {
        if (this.addtitle === '设置VIP') {
          this.$g.ajax({
            path: 'users/setVip',
            method: 'post',
            data: that.addvideo,
            cbSuccess: function(data) {
              that.$message.success('操作成功')
              that.seecontent = false
              that.addvideo = {
                begin_time: '',
                end_time: '',
                id_card: ''
              }
              that.page = 1
              that.search()
            },
            cbError: function(data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
        if (this.addtitle === '设置大咖') {
          this.$g.ajax({
            path: 'users/setExpert',
            method: 'post',
            data: {
              ids: this.deletes.ids,
              price: this.price,
              deal_id: this.kaDiscount
            },
            cbSuccess: function(data) {
              that.seecontent = false
              that.search()
              that.kaDiscount = ''
              that.$message.success('成功')
            },
            cbError: function(data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
        if (this.addtitle === '设置用户组') {
          this.$g.ajax({
            path: 'userGroups/setUserGroup',
            method: 'post',
            data: {
              user_ids: this.deletes.ids,
              user_aro_id: that.addvideo.aro_id,
              begin_time: that.addvideo.begin_time,
              end_time: that.addvideo.end_time
            },
            cbSuccess: function(data) {
              that.seecontent = false
              that.search()
              that.addvideo = {
                begin_time: '',
                end_time: '',
                aro_id: ''
              }
              that.$message.success('成功')
            },
            cbError: function(data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
        if (this.addtitle === '修改') {
          this.$g.ajax({
            path: 'tools/update',
            method: 'post',
            data: {
              id: that.tid,
              title: that.addvideo.title,
              intro: that.addvideo.intro,
              website: that.addvideo.website,
              icon: that.addvideo.icon,
              deal_code: that.addvideo.deal_code,
              download_url: that.addvideo.download_url,
              order_num: that.addvideo.order_num,
              enabled: that.addvideo.enabled,
              content: that.addvideo.content
            },
            cbSuccess: function(data) {
              that.seecontent = false
              that.$refs.editor.setContent({})
              that.search()
            },
            cbError: function(data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
      }
    },
    changepage1(page) { // 更改page
      this.page = page
      this.search()
    },
    delhot() { // 删除视频集
      let that = this
      this.$confirm('确定删除该工具与服务吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$g.ajax({
          path: 'tools/delete',
          method: 'post',
          data: {
            id: that.tid
          },
          cbSuccess: function(data) {
            that.search()
          },
          cbError: function(data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getid1(val) { // 获取列表button信息
      let that = this
      if (val.btn === '删除') {
        this.tid = val.val.id
        this.delhot()
      }
      if (val.btn === '设置VIP') {
        that.getmsg = val
        that.tid = val.val.id
        that.seecontent = true
        that.addtitle = '设置VIP'
        console.log(val.val)
        that.changemsg(val)
      }
      if (val.btn === '设置优惠券') {
        that.getmsg = val
        that.tid = val.val.id
        that.setCode()
      }
      if (val.btn === '查看用户信息') {
        that.getmsg = val
        that.tid = val.val.id
        that.getUserinfo()
      }
    },
    getUserinfo() {
      let that = this
      this.$g.ajax({
        path: 'users/getInfo',
        method: 'post',
        data: {
          user_id: that.tid
        },
        cbSuccess: function(data) {
          that.userInfo = data.memo
          that.centerDialogVisible1 = true
        },
        cbError: function(data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    getselect(vals) { // 获取多选id
      this.deletes.ids = []
      for (let i in vals) {
        this.deletes.ids.push(vals[i].id)
      }
    },
    changemsg() {
      this.addvideo = {
        user_id: this.getmsg.val.id,
        begin_time: this.getmsg.val.begin_time,
        end_time: this.getmsg.val.end_time,
        id_card: this.getmsg.val.id_card
      }
      if (this.getmsg.enabled === 0) {
        this.enabled = 0
      }
      if (this.getmsg.enabled === 1) {
        this.enabled = 1
      }
    },
    setCode1(arr) {
      console.log(arr)
      let that = this
      this.$g.ajax({
        path: 'dealPoints/getList',
        method: 'post',
        data: {
          page: 'all'
        },
        cbSuccess: function(data) {
          that.allCode = data.memo.list
          that.$nextTick(() => {
            if (arr.length > 0) {
              for (let n in that.allCode) {
                for (let i in arr) {
                  if (arr[i].point_id === that.allCode[n].id) {
                    that.inputCode[arr[i].point_id] = arr[i].point
                  }
                }
              }
            } else {
              for (let i in that.allCode) {
                that.inputCode[that.allCode[i].id] = 0
              }
            }
          })
          that.$nextTick(() => {
            if (that.addtitle !== '设置大咖') {
              that.centerDialogVisible = true
            }
          })
        },
        cbError: function(data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    setCode() {
      let that = this
      let getData = []
      this.$g.ajax({
        path: 'users/getInfo',
        method: 'post',
        data: {
          user_id: that.tid
        },
        cbSuccess: function(data) {
          getData = data.memo.user_points
          that.setCode1(getData)
        },
        cbError: function(data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    postCode() {
      console.log(this.inputCode)
      let that = this
      let postArr = []
      for (let i in this.inputCode) {
        let postOne = {
          id: i,
          num: that.inputCode[i]
        }
        postArr.push(postOne)
      }
      this.$nextTick(() => {
        that.$g.ajax({
          path: 'users/setPoint',
          method: 'post',
          data: {
            user_id: that.tid,
            deals: postArr
          },
          cbSuccess: function(data) {
            that.inputCode = []
            that.centerDialogVisible = false
            that.$message.success('保存成功')
          },
          cbError: function(data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.userinfo-class {
  padding: 10px 0;
  line-height: 30px;
  border-bottom: 1px solid #cccccc;
  text-align: center;

  .img-title {
    position: relative;
    top: -18px;
  }

  img {
    width: 50px;
    height: 50px;
  }
}

.active {
  display: inline-block;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

#videolist {
  .main-box {
    margin-top: 20px;

    span {
      margin-right: 30px;
      font-size: 14px;
      font-weight: 700;
      color: #606266;
    }

    .el-input {
      width: 240px;
    }
  }

  .main-box {
    .el-radio__inner {
      background: red;
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: #00a4a0 !important;
    }
  }

  .layer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    overflow: hidden;

    .mask {
      background: rgba(153, 153, 153, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
    }

    .imgcontent {
      text-align: center;

      img {
        position: relative;
        max-width: 80%;
        max-height: 80%;
        background: #fff;
        margin: 5% auto;
        z-index: 3;
      }
    }

    .content {
      position: relative;
      width: 60%;
      max-height: 80%;
      background: #fff;
      margin: 5% auto;
      z-index: 2;
      padding: 30px;
      overflow: scroll;

      .close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
      }

      .inputcl {
        margin-top: 20px;

        .layer-list-title {
          display: inline-block;
          width: 80px;
          margin-left: 15px;
          margin-right: 10px;
          float: left;
          vertical-align: middle;
          line-height: 28px;
        }

        .img-list {
          vertical-align: top;
          float: left;
          line-height: 18px;
        }

        .imgupload {
          display: block;
          margin-left: 105px;
        }

        .imgupload1 {
          display: block;
          margin-left: 105px;
        }

        .main-cctv {
          min-height: 200px;
          border: 1px solid #cccccc;
        }

        .el-input {
          max-width: 200px;
        }

        img {
          width: 320px;
          height: 240px;
        }
      }

      .title {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
      }

      .doit .one .el-input {
        width: 200px;
        margin-left: 20px;
      }

      .doit .one {
        margin-top: 20px;
        font-size: 14px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        position: relative;
        left: -4px;
      }

      .buttons {
        margin-top: 20px;
        text-align: center;

        button {
          margin: 0 20px;
        }
      }
    }
  }
}

.code-ul {
  li {
    padding: 0 20px;
    margin-bottom: 10px;

    .el-input {
      max-width: 100% !important;
    }

    div:nth-of-type(1) {
      font-size: 14px;
      margin-bottom: 6px;
    }
  }
}
</style>
<style>
.el-button:focus, .el-button:hover {
  color: #00a4a0;
}

.el-button:active {
  border-color: #00a0a0;
}

.el-button {
  padding: 8px 14px;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #00a4a0;
  border-color: #00a4a0;
}

.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

#videolist .el-textarea__inner {
  resize: none;
}
</style>
